<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>backface-visibility属性的基本使用</title>
<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	body {
		background-color: hsla(173,80%,21%,.9); 
	}
	.stage{
		float: left;
		border: 1px dotted orange;
		position: relative;
		margin: 20px;
		border-radius: 8px;
		
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-ms-perspective: 1000;
		-o-perspective: 1000;
		perspective: 1000;
	}
	.container {
		width: 102px;
		height: 142px;
		position: relative;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		-ms-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
		
		-webkit-transform-style: preserve-3d;  
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
   }
	.card {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.front {
		background: url(images/cardjfront.png) no-repeat center/100% 100%;
		z-index: 2;

	}
	.back {
		background: url(images/cardjback.png) no-repeat center/100% 100%;
		 -webkit-transform: rotateY(180deg);
		   -moz-transform: rotateY(180deg);
		   -ms-transform: rotateY(180deg);
		   -o-transform: rotateY(180deg);
		   transform: rotateY(180deg);
	}
	
	.stage:nth-child(1) .container{
		-webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	
	.stage:nth-child(2) .container{
		-webkit-transform: rotateY(30deg);
		-moz-transform: rotateY(30deg);
		-ms-transform: rotateY(30deg);
		-o-transform: rotateY(30deg);
		transform: rotateY(30deg);
	}
	.stage:nth-child(3) .container{
		-webkit-transform: rotateY(60deg);
		-moz-transform: rotateY(60deg);
		-ms-transform: rotateY(60deg);
		-o-transform: rotateY(60deg);
		transform: rotateY(60deg);
	}
	.stage:nth-child(4) .container{
		-webkit-transform: rotateY(90deg);
		-moz-transform: rotateY(90deg);
		-ms-transform: rotateY(90deg);
		-o-transform: rotateY(90deg);
		transform: rotateY(90deg);
	}
	.stage:nth-child(5) .container{
		-webkit-transform: rotateY(120deg);
		-moz-transform: rotateY(120deg);
		-ms-transform: rotateY(120deg);
		-o-transform: rotateY(120deg);
		transform: rotateY(120deg);
	}
	.stage:nth-child(6) .container{
		-webkit-transform: rotateY(150deg);
		-moz-transform: rotateY(150deg);
		-ms-transform: rotateY(150deg);
		-o-transform: rotateY(150deg);
		transform: rotateY(150deg);
	}
	.stage:nth-child(7) .container{
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}
</style>	
</head>
<body>
	<div class="stage">
		<div class="container">
			<div class="card front"></div>
			<div class="card back"></div>
		</div>
	</div>
	<div class="stage">
		<div class="container">
			<div class="card front"></div>
			<div class="card back"></div>
		</div>
	</div>
	<div class="stage">
		<div class="container">
			<div class="card front"></div>
			<div class="card back"></div>
		</div>
	</div>
	<div class="stage">
		<div class="container">
			<div class="card front"></div>
			<div class="card back"></div>
		</div>
	</div>
	<div class="stage">
		<div class="container">
			<div class="card front"></div>
			<div class="card back"></div>
		</div>
	</div>
	<div class="stage">
		<div class="container">
			<div class="card front"></div>
			<div class="card back"></div>
		</div>
	</div>
	<div class="stage">
		<div class="container">
			<div class="card front"></div>
			<div class="card back"></div>
		</div>
	</div>
</body>
</html>